<template>
  <div>
    <img class="img" :src="info.img" />
    <div>{{ info.name }}</div>
    <div>数量{{ info.num }}</div>
    <div>价格{{ info.price?.toFixed(2) }}</div>

    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="totalNum"  @click="gotoShoppingcar"/>
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="showDetail"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>

    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="info.id"
      :hide-stock="sku.hide_stock"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    />
  </div>
</template>

<script>

import { goodsQuery, goodsDetail } from "@/model/goodsModel";
import  {mapGetters} from "vuex"
import {
  shoppingcarAdd,
  shoppingcarQuery,
  shoppingcarUpdate,
} from "@/model/shoppingcarModel";
import  {changeNav} from  '@/mixins/changenav'
export default {
  mixins:[changeNav],//混入
  computed:{
    ...mapGetters("shoppingStore",["totalNum"])

  },
  data() {
    return {
      info: {},
      show: false, //可见性
      sku: {
        // 数据结构见下方文档
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          //   {
          //     k: "颜色", // skuKeyName：规格类目名称
          //     k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
          //     v: [
          //       {
          //         id: "1", // skuValueId：规格值 id
          //         name: "红色", // skuValueName：规格值名称
          //         imgUrl: "https://gw.alicdn.com/bao/upload/O1CN01qRUxKG1KzfxUK1liN_!!6000000001235-0-yinhe.jpg_Q75.jpg", // 规格类目图片，只有第一个规格类目可以定义图片
          //         previewImgUrl: "https://gw.alicdn.com/bao/upload/O1CN01qRUxKG1KzfxUK1liN_!!6000000001235-0-yinhe.jpg_Q75.jpg", // 用于预览显示的规格类目图片
          //       },
          //       {
          //         id: "2",
          //         name: "蓝色",
          //         imgUrl: "https://img01.yzcdn.cn/2.jpg",
          //         previewImgUrl: "https://img01.yzcdn.cn/2.jpg",
          //       },
          //     ],
          //     largeImageMode: true, //  是否展示大图模式
          //   },
          //   {
          //     k: "尺寸", // skuKeyName：规格类目名称
          //     k_s: "s2", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
          //     v: [
          //       {
          //         id: "1", // skuValueId：规格值 id
          //         name: "大", // skuValueName：规格值名称
          //       },
          //       {
          //         id: "2",
          //         name: "小",
          //       },
          //     ],
          //   },
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          //   {
          //     id: 2259, // skuId
          //     s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
          //     s2: "1", // 规格类目 k_s 为 s2 的对应规格值 id
          //     price: 100, // 价格（单位分）
          //     stock_num: 110, // 当前 sku 组合对应的库存
          //   },
          //   {
          //     id: 2260, // skuId
          //     s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
          //     s2: "2", // 规格类目 k_s 为 s2 的对应规格值 id
          //     price: 200, // 价格（单位分）
          //     stock_num: 10, // 当前 sku 组合对应的库存
          //   },
          //   {
          //     id: 2261, // skuId
          //     s1: "2", // 规格类目 k_s 为 s1 的对应规格值 id
          //     s2: "1", // 规格类目 k_s 为 s2 的对应规格值 id
          //     price: 200, // 价格（单位分）
          //     stock_num: 10, // 当前 sku 组合对应的库存
          //   },
          //   {
          //     id: 2262, // skuId
          //     s1: "2", // 规格类目 k_s 为 s1 的对应规格值 id
          //     s2: "2", // 规格类目 k_s 为 s2 的对应规格值 id
          //     price: 200, // 价格（单位分）
          //     stock_num: 1, // 当前 sku 组合对应的库存
          //   },
        ],
        price: "1.00", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        hide_stock: false, // 是否隐藏剩余库存
      },
      goods: {
        // 数据结构见下方文档
        picture: "",
      },
    };
  },
  async created() {
    let res = await goodsQuery({
      id: this.$route.params.id,
    });
    this.info = res.data[0];
    this.goods.picture = this.info.img;
  },
  methods: {
  
    async showDetail() {
      let userinfo = window.localStorage.getItem("userinfo");
      if (userinfo) {
        this.show = true;
        let res = await goodsDetail({
          goodsid: this.info.id,
        }); //获取所有数据
        let data = res.data;
        //找到颜色的集合
        //第一步找到颜色集合 并且对颜色进行去重
        let colorList = Array.from(
          new Set(data.map((item) => item.colorid))
        ).map((colorid) => {
          let info = data.filter((item) => item.colorid == colorid)[0];
          return {
            id: colorid,
            name: info["colorname"],
            imgUrl: info.img,
            previewImgUrl: info.img.replace("100x100", "200x200"),
          };
        });
        let colorInfo = {
          k: "颜色", // skuKeyName：规格类目名称
          k_s: "s1",
          v: colorList,
        };
        this.sku.tree = [];
        this.sku.list = []; //清空
        this.colorList = colorList; //用this记录数据
        this.sku.tree.push(colorInfo);

        //第二步找到尺寸集合 并且对尺寸进行去重
        let sizeList = Array.from(new Set(data.map((item) => item.sizeid))).map(
          (sizeid) => {
            let info = data.filter((item) => item.sizeid == sizeid)[0];
            return {
              id: sizeid,
              name: info["sizename"],
            };
          }
        );
        let sizeInfo = {
          k: "尺寸", // skuKeyName：规格类目名称
          k_s: "s2",
          v: sizeList,
        };
        this.sizeList = sizeList;
        this.sku.tree.push(sizeInfo);

        //第三步 做好对应关系
        let list = data.map((item) => {
          return {
            id: item.id,
            s1: item.colorid,
            s2: item.sizeid,
            price: item.price * 100, // 价格（单位分）
            stock_num: item.num,
          };
        });
        this.sku.list = list;
        this.sku.price = this.info.price;
      } else {
        window.localStorage.setItem("backUrl", this.$route.path);
        this.$router.push("/mine");
      }
    },
    onBuyClicked(info) {
      console.log(info);
    },
    gotoShoppingcar(){
      this.$router.push("/shoppingcar");
    },
    async onAddCartClicked(info) {
      //添加到购物车
      //userid  ?
      //goodsid 有
      //goodsdetailid 有
      //goodsname  有
      //goodsprice 有
      //buynum  有
      //goodsimg   ?
      //colorname  ?
      //sizename    ?
      //let res = await shoppingcarAdd({});
      let userinfo = window.localStorage.getItem("userinfo");
      userinfo = JSON.parse(userinfo);
      let userid = userinfo.id; //登录的用户编号
      let goodsid = this.info.id; //商品详情的编号
      let goodsdetailid = info.selectedSkuComb.id; //实际选择商品的编号
      let goodsname = this.info.name;
      let goodsprice = info.selectedSkuComb.price;
      let buynum = info.selectedNum;
      let colorInfo = this.colorList.filter((item) => {
        return item.id == info.selectedSkuComb.s1;
      })[0];
      let colorname = colorInfo["name"];
      let img = colorInfo["imgUrl"];

      let sizeInfo = this.sizeList.filter((item) => {
        return item.id == info.selectedSkuComb.s2;
      })[0];
      let sizename = sizeInfo.name;

      let res2 = await shoppingcarQuery({
        userid,
        goodsdetailid,
      });

      if (res2.data.length) {
        let existInfo = res2.data[0];
        let id = existInfo.id; //需要更新的编号
        let existNum = existInfo.buynum; //需要更新原数量
        await shoppingcarUpdate(id, {
          buynum: existNum + buynum,
        });
      } else {
        await shoppingcarAdd({
          userid,
          goodsid,
          goodsdetailid,
          goodsname,
          goodsprice,
          buynum,
          colorname,
          img,
          sizename,
        });
      }

      this.$dialog.confirm({
        title: "加入成功",
        message: "点击确定进入购物车页面 取消继续购物",
      })
        .then(() => {
          // on confirm
          this.$router.push("/shoppingcar");
        })
        .catch(() => {
          this.$router.push("/");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.img {
  width: 100%;
  height: 200px;
}
</style>
